<script>
export default {
  props: {
    id: {
        type: Number,
        require: true
    },
    name: {
        type: String,
        require: true
    }
  },
  setup(props) {
    console.log( props );
  },
  data() {
    return {
      counter: 0
    }
  },
  methods: {
    increase() {
      console.log('increase');
      this.counter++;
    }
  },
  // 声明当组件实例被父组件通过模板引用访问时暴露的公共属性
  expose: [ 'increase' ]
}
</script>

<template>
  <div>
    id: {{id}}, 
    name: {{name}}
    <p>
      <button @click="increase">已点击{{counter}}次</button>
    </p>
  </div>
</template>